<template>
	<view class="content">
		<view class="zhuige-login" :style="background?'background-image: url(' + background + ');':''">
			<view class="zhuige-logo">
				<!-- <image mode="aspectFill" :src="logo"></image> -->
				<view v-if="title" style="font-size: 50rpx;font-family: 'Courier New', Courier, monospace;">{{title}}</view>
				<view v-if="type=='isBind'">绑定账号才能发布文章，点赞和+关注</view>
			</view>
			<template v-if="type=='isBind'">
				<view class="jiangqie-searchbox">
					<view class="jiangqie-search-input">
						<input v-model="userInfo.username" placeholder="请输入用户名" placeholder-class="jiangqie-input-plholder"
							class="jiangqie-input">
					</view>
				</view>
				<view class="jiangqie-searchbox">
					<view class="jiangqie-search-input">
						<input v-model="userInfo.password" placeholder="请输入密码" placeholder-class="jiangqie-input-plholder"
							class="jiangqie-input">
					</view>
				</view>
			</template>
			<template v-if="type == 'registerUser'">
				<view class="jiangqie-searchbox">
					<view class="jiangqie-search-input">
						<input v-model="userInfo.username" placeholder="请输入用户名" placeholder-class="jiangqie-input-plholder"
							class="jiangqie-input">
					</view>

				</view>
				<view class="jiangqie-searchbox">
					<view class="jiangqie-search-input">
						<input v-model="userInfo.password" placeholder="请输入密码" placeholder-class="jiangqie-input-plholder"
							class="jiangqie-input">
					</view>

				</view>
				<view class="jiangqie-searchbox">
					<view class="jiangqie-search-input">
						<input v-model="userInfo.confirmPassword" placeholder="确认密码" placeholder-class="jiangqie-input-plholder"
							class="jiangqie-input">
					</view>
				</view>
			</template>

			<view class="zhuige-login-btn">
				<template v-if="type=='login'">
					<button class="zhuige-button" @click="clickLogin">登录</button>
					
				</template>
				<template v-if="type=='isBind'">
					<view @click="clickIsBind" class="zhuige-button">确认绑定</view>

					<view @click="showRegisterUser" class="zhuige-button">注册用户</view>
				</template>
				<template v-if="type=='registerUser'">
					<view @click="confirmRegisterUser" class="zhuige-button">确认注册</view>
				</template>
				<view @click="clickWalk" class="zhuige-button">随便逛逛</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Constant from '@/utils/constants';
	import Util from '@/utils/util';
	import Auth from "@/utils/auth";
	import Alert from '@/utils/alert';
	import Api from '@/utils/api';
	import Rest from '@/utils/rest';

	export default {
		data() {
			return {
				type: 'login',

				background: '',
				logo: '',
				title: '',
				
				argeeLicense: false,
				yhxy: undefined,
				yszc: undefined,
				
				userInfo: {
					username: '',
					password: '',
					confirmPassword: '',
				},
				nickname: '',
				openId: '',
				avatarUrl: '',
			}
		},

		onLoad(options) {
			Util.addShareScore(options.source);
			
			if (options.type) {
				this.type = options.type;
			}
			
			let nav_title = (this.type == 'login' ? '登录' : '绑定手机号');
			uni.setNavigationBarTitle({
				title: nav_title
			})
			
			this.title = getApp().globalData.appName;
			
			// #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU
			uni.login({
				success: (res) => {
					this.code = res.code;
				}
			});
			// #endif
			
			this.loadSetting()
		},

		onShareAppMessage() {
			return {
				title: getApp().globalData.appName,
				path: Util.addShareSource('pages/tabs/index/index')
			};
		},

		methods: {
			/**
			 * 点击打开链接
			 */
			openLink(link) {
				Util.openLink(link)
			},
			
			/**
			 * 点击登录
			 */
			clickLogin() {
				
				// #ifdef H5
				Rest.post(Api.JIANGQIE_USER_LOGIN_TEST).then(res => {
				
					if (res.success) {
						if (res.result.isBind) {
							Auth.setUser(res.result);
							uni.$emit('zhuige_event_user_login', {});
							Util.navigateBack();
						} else {
							this.type = 'isBind'
						}
					} else {
						Alert.toast(res.message);
					}
				}, err => {
					console.log(err)
				});
				return;
				// #endif

				// #ifdef MP-WEIXIN
				this.login('微信用户', '');
				return;
				// #endif

				Alert.toast('此平台尚未适配');
			},

			/**
			 * 登录
			 */
			login(nickname, avatar) {
				let params = {
					js_code: this.code,
					nickname: nickname,
					avatarUrl: avatar
				};

				let source = uni.getStorageSync(Constant.ZHUIGE_SOURCE_USER_ID);
				if (source) {
					params.from_user_id = source;
				}

				// #ifdef MP-WEIXIN
				params.channel = 'weixin';
				// #endif

				// #ifdef MP-BAIDU
				params.channel = 'baidu';
				// #endif

				Rest.post(Api.JIANGQIE_USER_LOGIN, params).then(res => {
					if (res.success) {
						if (res.result.isBind) {
							Auth.setUser(res.result);
							uni.$emit('zhuige_event_user_login', {});
							Util.navigateBack();
						} else {
							this.nickname = res.result.nickname
							this.openId = res.result.openId
							this.avatarUrl = res.result.avatarUrl
							this.type = 'isBind'
						}
					} else {
						Alert.toast(res.message);
					}
				}, err => {
					console.log(err)
				});
			},

			/**
			 * 随便看看
			 */
			clickWalk() {
				Util.navigateBack()
			},

			/**
			 * 加载配置
			 */
			loadSetting() {
				this.background = Auth.getConfig().login_background;
				this.title = Auth.getConfig().app_title;
			},

			/**
			 * 获取手机号
			 */
			getPhoneNumber(e) {
				Rest.post(Api.URL('user', 'set_mobile'), {
					encrypted_data: e.detail.encryptedData,
					iv: e.detail.iv,
					code: this.code,
				}).then(res => {
					Alert.toast(res.message)
					
					// 更新本地缓存的信息
					let user = Auth.getUser();
					user.mobile = res.data.mobile;
					Auth.setUser(user);
					
					uni.$emit('zhuige_event_user_mobile', {
						mobile: res.data.mobile
					});
					Util.navigateBack();
				})
			},
			
			clickIsBind() {
				let username = this.userInfo.username
				let password = this.userInfo.password
				if (username === undefined || username === null || username.length === 0 || username.trim().length === 0) {
					uni.showToast({
						icon: 'none',
						title: '用户名不能为空！'
					});
				} else if (password === undefined || password === null || password.length === 0 || password.trim()
					.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '密码不能为空！'
					});
				} else {
					Rest.post(Api.JIANGQIE_USER_BIND, {
						username: username,
						password: password,
						openId: this.openId
					}).then(res => {
						if (res.success) {
							Auth.setUser(res.result);
							uni.showToast({
								icon: 'none',
								title: res.msg
							});
							Util.navigateBack();
						} else {
							Alert.toast(res.message);
						}
						
					});
				}
			},
			showRegisterUser() {
				this.type = 'registerUser'
			},
			confirmRegisterUser() {
				let username = this.userInfo.username
				let password = this.userInfo.password
				let confirmPassword = this.userInfo.confirmPassword
				let passwordReg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/;
				if (username === undefined || username === null || username.length === 0 || username.trim().length === 0) {
					uni.showToast({
						icon: 'none',
						title: '用户名不能为空！'
					});
				} else if (password === undefined || password === null || password.length === 0 || password.trim()
					.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '密码不能为空！'
					});
				} else if (!passwordReg.test(password)) {
					uni.showToast({
						icon: 'none',
						title: '密码格式错误！'
					});
				} else if (password && password !== confirmPassword) {
					uni.showToast({
						icon: 'none',
						title: '两次输入的密码不一样！'
					});
				} else {
					Rest.post(Api.JIANGQIE_USER_REGISTER, {
						username: username,
						password: password,
						realname: this.nickname,
						openId: this.openId,
						avatar: this.avatarUrl
					}).then(res => {
						if (res.success) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							});
							// Util.navigateBack();
							this.type = 'isBind'
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							});
						}
			
					});
				}
			}
		}
	}
</script>

<style>
	.zhuige-login {
		position: fixed;
		height: 100%;
		width: 100%;
		text-align: center;
		background-size: cover;
		background-position: center;
	}

	.zhuige-logo {
		padding-top: 360rpx;
	}

	.zhuige-logo image {
		height: 160rpx;
		width: 160rpx;
		border-radius: 50%;
	}

	.zhuige-logo view {
		line-height: 4rem;
		font-size: 38rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.zhuige-logo view:nth-child(3) {
		font-size: 28rpx;
		font-weight: 400;
	}

	.zhuige-login-btn {
		position: absolute;
		width: 100%;
		bottom: 140rpx;
	}

	.zhuige-button {
		margin: 0 100rpx;
		line-height: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 1.2rem;
		border: 1rpx solid #EEEEEE;
		background: none;
		color: #FFFFFF;
	}

	.zhuige-login-tip {
		font-size: 22rpx;
		color: #FFFFFF;
	}

	.zhuige-login-tip text.link {
		color: #EEEEEE;
		text-decoration: underline;
	}
	
	.jiangqie-searchbox {
		padding: 30rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	.jiangqie-search-input {
		width: 80%;
		height: 66rpx;
		border-radius: 35rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		border: 1rpx solid #DDD;
		margin: auto;
	}
	
	.jiangqie-input {
		flex: 1;
		color: #333;
		padding: 0 16rpx;
		font-size: 28rpx;
	}
	
	.jiangqie-input-plholder {
		font-size: 28rpx;
		color: #b2b2b2;
	}
</style>
